<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main Page</title>
  <style>
    body {
      display: flex;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      width: 200px;
      height: 100vh;
      background-color: #333;
      color: #fff;
      padding: 20px;
      box-sizing: border-box;
    }
    .sidebar a {
      display: block;
      color: #fff;
      text-decoration: none;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
    }
    .sidebar a:hover {
      background-color: #575757;
    }
    .content {
      flex-grow: 1;
      padding: 20px;
    }
    iframe {
      width: 100%;
      height: 100vh;
      border: none;
    }
    .header {
      width: calc(100% + 40px);
      height: 80px;
      background-color: #333;
      position: relative;
      border: 2px solid #423f3f;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      left: -20px;
      top: -20px;
    }
    .header nav {
      display: flex;
      flex-grow: 1;
    }
    .header nav a {
      color: #fff;
      text-decoration: none;
      padding: 0 15px;
      line-height: 80px;
      display: flex;
      align-items: center;
    }
    .header nav a:hover {
      background-color: #444;
    }
    .header .user-info {
      color: #fff;
      margin-right: 20px;
    }
    .header .logout-btn {
      background-color: #1abc9c;
      color: #fff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
    }
    .header .logout-btn a {
      color: #fff;
      text-decoration: none;
    }
    .dropdown-content {
      display: none;
      background-color: #444;
      margin: 10px 0;
    }
    .dropdown-content a {
      color: yellow;
      padding: 10px;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      background-color: #555;
    }
    .dropdown-content a:hover {
      background-color: #666;
    }
  </style>
</head>
<body>

<div class="sidebar">
  <a href="student.jsp" target="contentFrame">学生管理</a>
  <a href="../teacher.jsp" target="contentFrame">教师管理</a>
  <a href="../course.jsp" target="contentFrame">课程管理</a>
  <a href="../manager_score.jsp" target="contentFrame">分数管理</a>
  <a class="dropbtn" onclick="toggleDropdown()">项目管理</a>
  <div id="dropdownContent" class="dropdown-content">
    <a href="../manager_queryAllProjects.jsp" target="contentFrame">查看项目</a>
    <a href="../manager_projectAudits.jsp" target="contentFrame">审核加入项目</a>
    <a href="../manager_AudltSudentCreateProject.jsp" target="contentFrame">审核创建项目</a>
    <a href="../manager_addproject.jsp" target="contentFrame">创建项目</a>
  </div>
  <a id="accountManagement" href="my.jsp" target="contentFrame">账号管理</a>
</div>

<div class="content">
  <div class="header">
    <nav>
      <a href="#">首页</a>
      <a href="#">界面管理</a>
      <a href="#">栏目管理</a>
      <a href="#">内容管理</a>
      <a href="#">用户管理</a>
      <a href="#">论坛中心</a>
      <a href="#">应用中心</a>
      <a href="#">工具</a>
    </nav>
    <div class="user-info">当前用户：Arry，身份：系统管理员</div>
    <button type="button" class="logout-btn" onclick="logout()"><a href="../login.jsp">退出</a></button>
  </div>

  <iframe name="contentFrame" src="../manager_queryAllProjects.jsp"></iframe>
</div>

<script>
  function toggleDropdown() {
    var dropdownContent = document.getElementById('dropdownContent');
    var accountManagement = document.getElementById('accountManagement');
    if (dropdownContent.style.display === 'block') {
      dropdownContent.style.display = 'none';
      accountManagement.style.marginTop = '0';
    } else {
      dropdownContent.style.display = 'block';
      accountManagement.style.marginTop = dropdownContent.clientHeight*0.001 + 'px';
    }
  }

  function logout() {
    window.location.href = '${pageContext.request.contextPath}/logout';
  }
</script>
</body>
</html>
